<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
const props = defineProps({
  type: {
    type: String,
    default: ''
  }
})
console.log(props.type)
const initType = async () => {
  const str = (import.meta as any).glob('../html/*.js')
  for (const path in str) {
    const component = (await str[path]()).default
    if (component.name) {
      console.log(component)
      code.value[component.name] = component.html
    }
  }
  codeVal.value = code.value[props.type]
}


// 初始化
const code = ref({})
let codeVal = ref('');
// json
// 主题样式设置

initType()

onMounted(() => {
  // initIframe()
})
watch(() => props.type, (val) => {
  if (props.type) {
    codeVal.value = code[props.type]
    console.log(codeVal.value)
  }
})
</script>

<template>
  <div class="main">
    <iframe :srcdoc="codeVal" width="100%" height="100%"></iframe>
  </div>
</template>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eee;

}
</style>
